{% extends 'base.html' %}
{% block T_head %}
    <link rel="stylesheet" href="{% static 'css/alertify.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/alertify.default.min.css' %}">
    <script src="https://cdn.bootcss.com/raty/2.8.0/jquery.raty.min.js"></script>
    <script src="{% static 'js/alertify.min.js' %}"></script>
    <script>
    $(document).ready(function(){
    $(function(){

        $(".star").raty({
            number : 5,//星星个数
            path : '{% static 'img/star' %}',//图片路径
            hints : ['很差','较差','还行','推荐','力荐'],
            round:{down:.26,full:.7,up:.9},
            click : function(score, evt) {
                var id = this.id;
                var tr = document.getElementById('is_login');//利用是否存在登录成功的标签id来判断是否登录
                if (tr != null) {
                    var data_dict = {
                        'user_id': {{ user.id }},
                        'movie_id': id,
                        'score': score,
                         csrfmiddlewaretoken: '{{ csrf_token }}'
                    };
                    $.ajax({
                            url: '{% url 'movie:index' %}',
                            type: 'POST',
                            dataType: 'json',
                            data: data_dict,
                            success: function (data) {
                                if (data.status === true) {
                                    alertify.success('成功评分');
                                    $('#'+id.toString()).raty('readOnly', true);
                                }
                                else {
                                    alertify.error('您已经评分过！');
                                    $('#'+id.toString()).raty('score', data.score);
                                    $('#'+id.toString()).raty('readOnly', true);
                                }

                            },
                            error:function () {
                                alert('未请求成功！');
                            }
                        }
                    );

                }
                else{
                    alertify.alert("您还没有登录，请先登录！",
                        function(){

                             $(window).attr('location', '{% url 'login' %}');
                          }).set({'title':''});
                }
            }
        });
    });

    $("#recd").click(function () {
        var tr = document.getElementById('is_login');
        if(tr == null) {
            alertify.alert("您还没有登录，请先登录！",
                function(){
                     $(window).attr('location', '{% url 'login' %}');
                  }).set({'title':''});
        }
        else {
            $("#menu_text").html("类别");
        }
    });
    $("#dropdown_menu li a").click(function () {
        $("#menu_text").html(this.title);
    });
    $("#a_popular").click(function () {
        $("#menu_text").html("类别");
    });
});
    </script>
{% endblock %}
{% block T_body %}
    <div class="container">

    <div>
      <ul class="nav nav-tabs nav-justified" id="index" >
        <li class="active" ><a href="#popular" data-toggle="tab" id="a_popular">热门</a></li>
        <li id="recd"><a href="#recommend" data-toggle="tab">推荐</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span id="menu_text">类别</span>
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu nav" id="dropdown_menu" >
                {% for genre in genres %}
                    <li><a href="#{{ genre.En }}" data-toggle="tab" title={{ genre.Cn }}>{{ genre.Cn }}</a></li>
                {% endfor %}
                     <li ><a href="{% url 'movie:movies_all' %}">全部</a></li>
            </ul>
        </li>

      </ul>
    </div>


     <div class="tab-content" id="movies_content">
     {# 加载热门#}
         <div class="tab-pane fade in active" id="popular">
        <ul class="figures_lists">
            {% for movie in movies %}

                <li class="list_item col-sm-6 col-md-3" >
                    <a class="figure" >
                        <img src={{ movie.poster_url }} alt={{ movie.title }}>
                    </a>
                    <strong class="figure_title">
                    <a  target="_blank" href={{ movie.url }}>{{ movie.title }}</a>
                    <div class="evaluate">
                       <div class="star" id = {{ movie.id }}></div>
                    </div>
                    </strong>
                </li>
            {% endfor %}
        </ul>
      </div>
{#     加载各种类型电影#}
     {% for key, values in genres_all.items %}
          <div class="tab-pane fade in" id={{ key }}>
            <ul class="figures_lists">
                {% for value in values %}
                    <li class="list_item col-sm-6 col-md-3" >
                        <a class="figure" >
                            <img src="" x-src={{ value.poster_url }} alt={{ value.title }}>
                        </a>
                        <strong class="figure_title">
                        <a  target="_blank" href={{ value.url }} >{{ value.title }}</a>
                        <div class="evaluate">
                           <div class="star" id = {{ value.id }}></div>
                        </div>
                        </strong>
                    </li>
                {% endfor %}
            </ul>
          </div>
     {% endfor %}
{#     加载推荐#}
        {% if user.is_authenticated %}
            <div class="tab-pane fade in" id="recommend">
             <ul class="figures_lists">
                 {% for movie in rec_movies %}

                <li class="list_item col-sm-6 col-md-3" >
                    <a class="figure" >
                        <img src="" x-src={{ movie.poster_url }} alt={{ movie.title }}>
                    </a>
                    <strong class="figure_title">
                    <a  target="_blank" href={{ movie.url }} >{{ movie.title }}</a>
                    <div class="evaluate">
                       <div class="star" id = {{ movie.id }}></div>
                    </div>
                    </strong>
                </li>
            {% endfor %}
        </ul>
      </div>
        {% endif %}

     </div>
    </div>
{% endblock %}

